<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.7.1.js"></script>
    <script>
        /* ajax发送GET，data部分也会拼接到路径参数 */
        function fun1() {
            $.ajax({
                url: 'demo02?type=3',
                type: 'GET',
                data: {
                    username: '李四',
                    password: '45678'
                },
                success: function (res) {
                    console.log(res)
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }

        /* ajax发送POST请求 */
        function fun2() {
            $.ajax({
                url: 'demo02',
                type: 'POST',
                data: {
                    type: 4,
                    username: '王五',
                    password: '45678',
                    msg: JSON.stringify({
                        bookName: '《三国演义》',
                        author: '罗贯中',
                        version: '1.1',
                        count: 100
                    }) // js对象转成json字符串
                },
                success: function (res) {
                    console.log(res)
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
    </script>
</head>
<body>
    <button onclick="fun1()">Ajax发送GET请求</button><br>
    <button onclick="fun2()">Ajax发送POST请求</button><br>
    <!-- 表单的action只能写地址，不能写路径参数 -->
    <!-- GET请求时：type=3会被忽略掉，POST请求不会 -->
    <!-- GET请求：每一个设置了name属性的input都会被转换成路径参数 -->
    <!-- POST请求：每一个设置了name属性的input都会被封装成表单参数 -->
    <!-- GET/POST提交方式，服务端获取参数方法是一样 -->
    <form action="demo02?type=3" method="post">
        <input type="hidden" name="type" value="3">
        <label>
            账号：
            <input type="text" name="username">
        </label><br/>
        <label>
            密码：
            <input type="password" name="password">
        </label><br/>
        <button type="submit">登录</button>
    </form>
    <hr/>
    <!-- 上传表单 -->
    <!-- enctype="application/x-www-form-urlencoded" ==>表单数据 -->
    <!-- enctype="multipart/form-data" ==>支持文件上传 -->
    <form action="demo02?type=5" method="post" enctype="multipart/form-data">
        <label>
            名称：
            <input type="text" name="filename">
        </label><br/>
        <label>
            密码：
            <input type="file" name="attachment">
        </label><br/>
        <button type="submit">上传</button>
    </form>
</body>
</html>